<route lang="json5">
{
  style: {
    navigationBarTitleText: '系统设置',
  },
}
</route>

<template>
  <view class="h-screen bg-gray-100 overflow-hidden">
    <keyboard-avoiding-view>
      <scroll-view scroll-y class="h-full" enable-flex>
        <view class="p-6 pb-safe space-y-6">
          <!-- 预览 -->
          <view class="rounded-2xl shadow-md p-4" :style="{ backgroundColor: localSettings.themeLightColor }">
            <text class="block text-sm text-gray-500 mb-2">预览：</text>
            <view class="p-4 rounded-xl" :style="{
              backgroundColor: localSettings.themeColor,
              fontSize: localSettings.titleSize,
              color: '#fff',
            }">
              <text>标题字体预览</text>
            </view>
            <view class="mt-3 rounded-xl border border-dashed p-3" :style="{ fontSize: localSettings.fontSize }">
              <text>正文字体预览内容</text>
            </view>
          </view>

          <!-- 设置 -->
          <view class="bg-white rounded-3xl shadow-md overflow-hidden">
            <view class="p-6 space-y-6">
              <!-- 字体设置（统一） -->
              <view>
                <text class="block font-semibold mb-2 text-[#333]" :style="{ fontSize: localSettings.titleSize }">
                  字体大小
                </text>
                <picker :range="settingsStore.fontSizeOptions" range-key="label" @change="onFontSizeChange">
                  <view class="flex items-center justify-between px-4 py-3 bg-gray-100 rounded-xl"
                    :style="{ fontSize: localSettings.fontSize }">
                    <text class="text-base text-[#666]">{{ currentFontSizeLabel }}</text>
                    <text class="text-[#888]">点击更改</text>
                  </view>
                </picker>
              </view>

              <!-- 主题颜色 -->
              <!-- <view>
                <text class="block font-semibold mb-2 text-[#333]" :style="{ fontSize: localSettings.titleSize }">
                  主题颜色
                </text>
                <picker :range="settingsStore.themeOptions" range-key="label" @change="onThemeChange">
                  <view class="flex items-center justify-between px-4 py-3 bg-gray-100 rounded-xl"
                    :style="{ fontSize: localSettings.fontSize }">
                    <view class="flex items-center">
                      <view class="w-5 h-5 rounded-full mr-3 border"
                        :style="{ backgroundColor: localSettings.themeColor }"></view>
                      <text class="text-base text-[#666]">{{ currentThemeLabel }}</text>
                    </view>
                    <text class="text-[#888]">点击更改</text>
                  </view>
                </picker>
              </view> -->

              <!-- 保存按钮 -->
              <view class="flex justify-center mt-6">
                <view
                  class="w-full h-12 rounded-full font-medium text-center leading-[48px] shadow-md active:scale-95 transition-transform duration-200"
                  :style="{
                    backgroundColor: localSettings.themeColor,
                    color: '#fff',
                    fontSize: localSettings.fontSize,
                  }" @click="onSave">
                  保存设置
                </view>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </keyboard-avoiding-view>
  </view>
</template>

<script setup lang="ts">
import { reactive, computed } from 'vue'
import { useSettingsStore } from '@/store/settings'
import { useToast } from 'wot-design-uni'

const toast = useToast()
const settingsStore = useSettingsStore()

// 本地副本用于预览
const localSettings = reactive({
  fontSize: settingsStore.fontSize,
  titleSize: settingsStore.titleSize,
  themeColor: settingsStore.themeColor,
  themeLightColor: settingsStore.themeLightColor,
})

// 当前字体标签
const currentFontSizeLabel = computed(() => {
  const match = settingsStore.fontSizeOptions.find(
    (item) =>
      item.fontSize === localSettings.fontSize &&
      item.titleSize === localSettings.titleSize,
  )
  return match?.label || '未知'
})

const currentThemeLabel = computed(
  () =>
    settingsStore.themeOptions.find((i) => i.themeColor === localSettings.themeColor)?.label ||
    '未知',
)

// 字体修改（标题 + 正文）
const onFontSizeChange = (e) => {
  const selected = settingsStore.fontSizeOptions[e.detail.value]
  localSettings.fontSize = selected.fontSize
  localSettings.titleSize = selected.titleSize
}

// 主题修改
const onThemeChange = (e) => {
  const selected = settingsStore.themeOptions[e.detail.value]
  localSettings.themeColor = selected.themeColor
  localSettings.themeLightColor = selected.themeLightColor
}

// 保存
const onSave = () => {
  const index = settingsStore.fontSizeOptions.findIndex(
    (item) =>
      item.fontSize === localSettings.fontSize &&
      item.titleSize === localSettings.titleSize,
  )
  if (index !== -1) settingsStore.setFontSize(index)

  const themeIndex = settingsStore.themeOptions.findIndex(
    (opt) => opt.themeColor === localSettings.themeColor,
  )
  if (themeIndex !== -1) settingsStore.setTheme(themeIndex)

  settingsStore.saveToStorage()
  toast.success('设置已保存')
}
</script>

<style scoped>
.pb-safe {
  padding-bottom: env(safe-area-inset-bottom);
}
</style>
